<!DOCTYPE html>
<html lang="en">
<head  >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云音乐商城</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
    <script type="text/javascript" src="js/jquery.jqzoom-core.js" ></script>
    <link rel="stylesheet" type="text/css" href="js/jquery.jqzoom.css"/>
    <link rel="icon" href="img/favicon.ico">
    <script src="js/common.js"></script>
    
    
</head>
<style>
    *{
        margin:0;
        padding: 0;
    }
     
    #demo{
    /* width: 534px;
    height: 376px; */
    width: 100%;
    height:100%;;
    margin: 0 auto;
    position: fixed;
    /* top: 20%;
    left: 30%; */
    text-align: right;
    display: none;
    z-index: 33;
}
.dompan{
    color: rgb(233, 227, 227);
    font-size: 20px;
    position: absolute;
    right:10px;
    top:  3px;
    cursor: pointer;
    z-index: 55;
}

.iflo{
    /* width: 539px;
    height: 377px; */
    width: 100%;
    height:100%;
    padding-right: 150px;
    border-radius: 5px;
    position: relative;
    /* top: 20%;
    left: 30%; */
}
			

    .top{
        width: 1035px;
        height: 80px;
        margin: 0 auto;
        position: relative;
        top: 0;
        border-bottom: 1px solid rgb(180, 177, 177);
    }
    .pic1{
        width: 300px;
        position: relative;
        /* left: 415px; */
        top: 25px;
        cursor: pointer;
        }
    .pic1 ul{
        position: absolute;
        left: 50px;
        top: -10px;
    }
    .pic1 ul li{
        float: left;
        list-style: none;
        font-size: 30px;
        font-weight:800;
        cursor: pointer;
    }
    .dian{
        color: red;
    }
     .top input{
        position: absolute;
        border: 1px solid rgb(173, 171, 171);
        width: 300px;
        height: 30px;
        background: url(img/放大镜.png)no-repeat left center;
        border-radius: 50px;
        left: 570px;
        top: 25px;
        text-align: left;
        text-indent: 1.5em;
    }
    .gouwu{
        position: absolute;
        top: 25px;
        left: 900px;

    }
    .gouwu img{
        height: 30px;
        width: 30px;
    }
    .hong{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: -11px;
        left: 19px;
    }
    .hong p{
        text-align: center;
    }
    #xuanze{
        
        position: absolute;
        top: 30px;
        left: 970px;
        
    }
    #xuanze a{
        color: #000;
        text-decoration: none;
    }
    
    .nav{
        position: relative;
        /* left: 415px; */
        margin: 0 auto;
        width: 1035px;
        height: 2000px;
        
    }
    .zz{
        position: absolute;
        width: 1035px;
        height: 100px;
        border-bottom: 1px solid black;
    }
    .zz a{
        color: #000;
        position: absolute;
        top: 50px;
        text-decoration: none;
        font-size: 28px;
        font-weight: 60px;
    }
    .zz a:hover{
        cursor: pointer;
        text-decoration:underline;
    }
    .zz span{
        position: absolute;
        font: 700;
        color: grey;
        font-size: 17px;
        left: 55px;
        top: 58px;
    }
    .zz img{
        position: absolute;
        top: 60px;
        left: 950px;
        
    }
    .zz p{
        position: absolute;
        top: 62px;
        left: 990px;
        font-size: 20px;
        font-weight: 600;
        color: rgb(148, 147, 147);
    }
    .zz img:hover,.zz p:hover{
        cursor: pointer;
        text-decoration: underline;
    }
    .zj{
        position: absolute;
        top: 150px;
        width: 1035px;
        background: url(img/轮播1.jpg)no-repeat ;
    }
    .lb1{
       
        border: 0.5px solid rgb(182, 181, 181);
    }
    .lb1x{
        position: absolute;
        top: 460px;
        left: 0;
    }
    .lb2x{
        position: absolute;
        top: 460px;
        left: 90px;
    }
    .lb3x{
        position: absolute;
        top: 460px;
        left: 180px;
       
    }.lb4x{
        position: absolute;
        top: 460px;
        left: 270px;
       
    }.lb5x{
        position: absolute;
        top: 460px;
        left: 360px;
       
    }
    .lb1x:hover,.lb2x:hover,.lb3x:hover,.lb4x:hover,.lb5x:hover{
        border: red 2px solid;
    
    }
    .ab{
        position: absolute;
        width: 570px;
        height: 542px;
        
        left: 550px;
        top: 150px;
        } 
    .ab h6{
        margin-top: 5px;
        font: 500;
        font-size: 12px;
        color: grey;
    }
    .jiage{
        font-size: 40px;
        font: 700;
        color: red;
        margin-top: 20px;
       
    }
   .ab span{
       position: absolute;
       top: 100px;
       left: 110px;
       font-size:10px ;
   }
   .cx{
       margin-top: 30px;
       color: grey;
       margin-left: 20px;
   }
   .ys{
       margin-top: 30px;
       color: grey;
       margin-left: 20px;
   }
   .sl{
       margin-top: 30px;
       color: grey;
       margin-left: 20px;
   }
   .fw{
       margin-top: 30px;
       color: grey;
       margin-left: 20px;
   }
   .lj{
       
       width: 400px;
       height: 25px;
       margin-top: -25px;
       margin-left: 100px;
       background-color: pink;
   }
   .box2{
       position: absolute;
       top: 150px;
       margin-left: 5px;
       margin-top: 3px;
       border: 1px solid red;
       width: 50px;
       height: 17px;
       text-align: center;
       font-size: 10px;
       color: red;
   }
   .ssy{
       margin-left: 60px;
       font-size: 10px;
       position: absolute;
       top: 154px;
   }
   .lj a{
       position: absolute;
       top: 154px;
       font-size: 10px;
       left: 310px;
       text-decoration: none;
   }
   .btn1{
       position:absolute;
       width: 40px;
       height: 30px;
       top: 200px;
       left: 100px;
       background-color: white;
       border: 1px solid rgb(218, 215, 215);
   }
    .btn1:hover{
        cursor: pointer;
    }
    .jj{
        position: absolute;
        width: 100px;
        height: 25px;
        border: 1px solid grey;
        left: 100px;
        top: 255px;
    }
    .btn2{
        position: absolute;
        height: 25px;
        width: 25px;
        border: none;
        background-color: rgb(231, 231, 231);
    }
    .btn3{
        position: absolute;
        top: 0px;
        margin-left: 74px;
        height: 25px;
        width: 25px;
        border: none;
        background-color: rgb(231, 231, 231);
    }
    .btn2:hover,.btn3:hover{
        cursor: pointer;
    }
    .jj p{
     position: absolute;
     left: 45px;
     top: 3px;
    }
    .ab ul{
        list-style: none;
        position: absolute;
        top: 310px;
        left: 85px;
    }
    .ab li{
        
        float: left;
        font-size: 15px;
        margin-left: 20px;
    }
    .ab li:before{
        position: absolute;
        top: -10px;
        margin-left: -10px;
        content: "·";
         font-size: 30px;
        color:red;
    }
    .ab li:hover{
        cursor: pointer;
        text-decoration: underline;
    }
    
    .btn4{
        width: 170px;
        height: 50px;
        background-color: #fff;
        border: red 3px solid;
        color: red;
        font-size: 20px;
        font-weight: 500;
        margin-top: 30px;
        margin-left: 50px;
        
    }
    .btn5{
        position: absolute;
        top: 358px;
        margin-left: 20px;
        width: 180px;
        height: 50px;
        background-color: red;
        font-size: 18px;
        color: white;
        background: url(img/购物车2.png)no-repeat red 20px;
    }
   
    .btn4:hover,.btn5:hover{
        cursor: pointer;
    }
    .xq{
         position: absolute;
         top: 580px;
         left: -550px;
         width: 700px;
         height: 19250px;
    }
    .spxq{
        width: 700px;
        height: 50px;
        border-bottom: 1px solid black;
    }
    .rm{
        position:absolute;
        top: 580px;
        left: 180px;
        height: 500px;
    }
    .rmcp{
        width: 340px;
        height: 50px;
        border-bottom: 1px solid black;
        
    }
    .rm img{
        width: 100px;
        height: 100px;
    }
    .pic2{
        margin-top: 20px;
    }
    .pic3{
        margin-top: 60px;
    }
    .pic4{
        margin-top: 60px;

    }
    .pic5{
        margin-top: 60px;
    }
    .jian40{
        border:1px solid red ;
        color: red;
        font-size: 10px;
        width: 55px;
        margin-left: 105px;
        margin-top: -100px;
    }
    .pra1{
        margin-left: 162px;
        margin-top: -20px;
        font-size:15px ;
    }
    .pra2{
        margin-left:105px ;
        font-size: 15px;
    }
    .jiage1{
        font-size: 20px;
        margin-left: 105px;
        margin-top: 36px;
        color: red;
    }
    .pra1:hover,.pra2:hover, .pra3:hover,.pra4:hover,.pra5:hover,.pra6:hover, .pra7:hover,.pra8:hover{
        text-decoration: underline;
        cursor: pointer;
    }
    .rm img:hover{
        cursor: pointer;
    }
    .tejia1{
        border:1px solid red ;
        color: red;
        font-size: 10px;
        width: 25px;
        margin-left: 105px;
        margin-top: -105px;
    }
    .pra3{
        margin-left: 136px;
        margin-top: -20px;
        font-size:14px ;
    }
    .pra4{
        margin-left:105px ;
        font-size: 14px;
    }
    .jiage2{
        font-size: 20px;
        margin-left: 105px;
        margin-top: 36px;
        color: red;
    }
   
    .tejia2{
        border:1px solid red ;
        color: red;
        font-size: 10px;
        width: 25px;
        margin-left: 105px;
        margin-top: -105px;
    }
    .pra5{
        margin-left: 136px;
        margin-top: -20px;
        font-size:14px ;
    }
    .pra6{
        margin-left:105px ;
        font-size: 14px;
    }
    .jiage3{
        font-size: 20px;
        margin-left: 105px;
        margin-top: 36px;
        color: red;
    }
    .jian150{
        border:1px solid red ;
        color: red;
        font-size: 10px;
        width: 58px;
        margin-left: 105px;
        margin-top: -100px;
    }
    .pra7{
        margin-left: 166px;
        margin-top: -20px;
        font-size:15px ;
    }
    .pra8{
        margin-left:105px ;
        font-size: 15px;
    }
    .jiage4{
        font-size: 20px;
        margin-left: 105px;
        margin-top: 36px;
        color: red;
    }
    .text1{
        margin-top: 20px;
        color: red;
        font-size: 15px;
    }
    .text2{
        margin-top: 10px;
        font-size: 20px;
    }
    .text3{
        margin-top: 10px;
        color: red;
        font-size: 15px;
    }
    .img1{
        margin-top: -5px;
    }
    
  
    .gallery{
        list-style: none;
        position: absolute;
        top: 0;
    }
    .cs{
        z-index: 0;
    }
    .kf p{
        font-size: 15px;
        margin-top: 10px;
    }
    .thelast {
			background-color: #EDEDED;
			width: 100%;
			height: 160px;
			position: absolute;
			top: 20295px;
		}
		
		.footer {
			width: 1100px;
			height: 160px;
			margin: auto;
			overflow: hidden;
			position: relative;
		}
		
		.footer .tiaokuan {
			color: #ccc;
			display: block;
			margin-top: 20px;
		}
		
		.footer .tiaokuan a {
			
			color: #333;
			font-size: 13px;
			margin: 0 10px 0;
		}
		
		.footer .clause .ban {
			color: #333;
			display: block;
			font-size: 13px;
			margin: 10px 0;
		}
		
		.footer .ban3 {
			text-decoration: none;
			color: #333;
		}
		
		.music {
			width: 330px;
			height: 70px;
			position: absolute;
			top: 30px;
			right: 0;
		}
		
		.music li {
			float: left;
			list-style: none;
			height: 70px;
			display: block;
		}
		
		.footer .duli {
			width: 60px;
			height: 70px;
			display: block;
			background: url(img/foot_enter.png) no-repeat -60px -227px;
		}
		
		.footer .zuanlan {
			width: 60px;
			height: 70px;
			display: block;
			background: url(img/foot_enter.png) no-repeat -5px -227px;
			margin-left: 30px;
		}
		
		.footer .zanshang {
			width: 60px;
			height: 70px;
			display: block;
			background: url(img/foot_enter.png) no-repeat -59px -300px;
			margin-left: 30px;
		}
		
		.footer .zimeiti {
			width: 60px;
			height: 70px;
			display: block;
			background: url(img/foot_enter.png) no-repeat -5px -151px;
			margin-left: 30px;
		}
		
		li {
			cursor: pointer;
		}
		a{
			text-decoration: none;
        }

        .totop{
            height: 60px;
            width: 30px;
            right: 0px;
            position: fixed;
            top: 400px;
            border: 1px black solid;
            background-color: burlywood;
           
        }
        .totop img{
            margin-top: 10px;
            margin-right: 2px;
        }
    
</style>
<body>
    
    <!-- 登录注册      -->
    <div  id="demo"><span class="dompan">x</span>
        <iframe class="iflo" src="../music/login/Login.html" frameborder="0"></iframe>
    </div>  

    <div class="top" id="top">
        <div class="pic1" >
        <img src="img/favicon.ico" alt="">
        
        <ul>
            <li> 网易云音乐</li>
            <li class="dian">·</li>
            <li>商城</li>
        </ul>
        </div>
           <input type="text " value="i19真无线">
           <div class="gouwu">
           <img src="img/购物车.png" alt="">
           <div class="hong">
               <p>0</p>
           </div>
           </div>
           <div id="xuanze">
               <a href="#" id="mashop">登录▼</a>
            </div>
       
    </div>

    <div class="nav">
         <div class="zz">
             <a href="../网易云商城界面/网易云商城.html">首页</a>   
             <span>＞i9S蓝牙5.0真无线 双耳高清通话 苹果安卓通用</span> 
             <img src="img/分享.png" alt="">
              <p>分享</p>   
         </div>
       
         <div class="zj">
        
            
             <ul id="gallery" class="gallery">
                
            <li><a href="img/轮播1.jpg"class="MYCLASS"><img src="img/轮播1小.jpg" alt="" class="lb1x"></a></a></li>
             <li><a href="img/轮播2.jpg" class="MYCLASS"><img src="img/轮播2小.jpg" alt="" class="lb2x"></a></a></li> 
             <li><a href="img/轮播3.jpg" class="MYCLASS"><img src="img/轮播3小.jpg" alt="" class="lb3x"></a></li>
            <li> <a href="img/轮播4.jpg"class="MYCLASS"><img src="img/轮播4小.jpg" alt="" class="lb4x"></a></li>
             <li><a href="img/轮播5.jpg" class="MYCLASS"><img src="img/轮播5小.jpg" alt="" class="lb5x"></a></li>
            </ul>
            <a href="img/轮播1大.png" class="show">
                <img src="img/轮播1.jpg" alt="" class="show" id="img">
            </a>
            <p id="des"></p>
         </div>
        
         <div class="ab">
             <h2>i9S蓝牙5.0真无线 双耳高清通话 苹果安卓通用</h2>
             <h6>赠送硅胶保护套+登山扣；蓝牙5.0 佩戴舒适 自带充电仓便携 双耳高清通话¥89¥169</h6>
             <p class="jiage">￥89</p>
             <span><s>¥169</s></span>
             <p class="cx">促销:</p>
             <div class="lj">
                 <div class="box2">领卷立减</div>
                 <p class="ssy">40元&nbsp;&nbsp;  双十一优享,&nbsp;无门槛</p>
                 <a href="">1云贝兑换</a>
             </div>
             <p class="ys">颜色：</p>
             <button class="btn1" id="btn">白色</button>
             <p class="sl">数量:</p>
                 <div class="jj">
                     <button class="btn2" id="btn1">➖</button>
                     <p>1</p>
                     <button class="btn3" id="btn2">➕</button>
                 </div>
                 <p class="fw">服务：</p>
                 <ul>
                     <li>七天无理由退货</li>
                     <li>满119包邮</li>
                     <li>商家发货</li>
                     <li>网易自营</li>
                 </ul>
                 <button class="btn4" id="btn3">立即购买</button>
                 <button class="btn5" id="btn4"> 加入购物车</button>      
                 
             <div class="xq">
                 <div class="spxq"><h2>商品详情</h2></div>
                 
                     <p class="text1">正品低价 品质保证</p>
                     <p class="text2">影巨人i9S 蓝牙5.0真无线耳机</p>
                     <p class="text3">装箱清单：耳机× 1对，充电仓×1，充电线× 1，说明书× 1</p>
                     <img src="img/长图1.jpg" alt="">
                     <img src="img/长图2.jpg" alt="" class="img1">
                     <img src="img/长图3.jpg" alt=""class="img1">
                     <img src="img/长图4.jpg" alt=""class="img1">
                     <img src="img/长图5.jpg" alt=""class="img1">
                     <img src="img/长图6.jpg" alt=""class="img1">
                     <img src="img/长图7.jpg" alt=""class="img1">
                     <div class="kf">
                     <p>商品交易成功后会在2个工作日内由深圳市恒天鸿业科技有限公司发货，法定节假日顺延，请在确认商品完好后再签收。若存在质量问题，请务必在7天之内联系客服：</p>
                     <p>·客服账号：私信 @云音乐商城客服</p>
                     <p>·温馨提示：完整的包装、配件和保修卡是电子产品进行售后的基础，请务必查看齐全后签收并妥善保管。 </p>
                     <p>注：因质量问题而退/换货所产生的运费报销最高15元，且须提供运费支付凭据，可寄出平邮，不支持顺丰，不支持到付。</p>
                    </div>
             </div>

             <div class="rm">
                 <div class="rmcp">
                     <h3>热门商品</h3>
                </div>

                <div class="pic2">
               <img src="img/小图1.jpg" alt="">
                 <div class="jian40">
                     <p>用卷减40</p>
                 </div>
                 <p class="pra1"> i9S蓝牙5.0真无线&nbsp; 双耳高</p>
                 <p class="pra2">清通话 苹果安卓通用</p>
                 <p class="jiage1">￥89</p>
                </div>

                <div class="pic3">
                    <img src="img/小图2.jpg" alt="">
                    <div class="tejia1">
                        <p>特价</p>
                        </div>
                    <p class="pra3">网易云音乐 2021年音乐人年历</p>
                    <p class="pra4">日历礼盒装（预售，12月中旬起发)</p>
                    <p class="jiage2">￥168</p>
                     </div>

                     <div class="pic4">
                        <img src="img/小图3.jpg" alt="">
                        <div class="tejia2">
                              <p>特价</p>
                        </div>
                        <p class="pra5">网易云音乐记忆回音系列黑白</p>
                        <p class="pra6">江湖圆领卫衣</p>
                        <p class="jiage3">￥109</p>
                    </div>
                    <div class="pic5">
                            <img src="img/小图4.jpg" alt="">
                            <div class="jian150">
                                <p>用卷减150</p>
                            </div>
                            <p class="pra7">H16Pro入耳检测开盖弹窗 </p>
                            <p class="pra8">无线充电 蓝牙5.0真无线耳机</p>
                            <p class="jiage4">￥229</p>
                            </div>
               </div>

            </div>

    <div class="thelast">
        <div class="footer">
            <div class="clause">
                <p class="tiaokuan"><a href="#">条款服务</a><span>|</span><a href="#">隐私政策</a><span>|</span><a href="#">儿童隐私政策</a><span>|</span><a href="#">版权投诉指引</a><span>|</span><a href="#">意见反馈</a></p>
                <p class="ban"><span class="ban2">网易公司版权所有©1997-2020</span>杭州乐读科技有限公司运营：<a class="ban3" href="#">浙网文[2018] 3506-263号</a></p>
                <p class="ban"><span class="ban2">违法和不良信息举报电话：0571-89853516举</span>举报邮箱：<a class="ban3" href="#">ncm5990@163.com</a></p>
                <p class="ban"><a class="ban3">食品经营许可证</a><a class="ban3" href="#"> 出版物经营许可证</a><a class="ban3"> 营业执照</a>网络食品交易第三方平台提供者信息备案: 浙网食A33010041</p>
                <p class="ban"><span class="ban2">粤B2-20090191-18</span>举报邮箱：<a class="ban3" href="#">工业和信息化部备案管理系统网站</a></p>
            </div>
            <div class="music">
                <ul>
                    <li>
                        <a class="duli" href="#"></a>
                    </li>
                    <li>
                        <a class="zuanlan" href="#"></a>
                    </li>
                    <li>
                        <a class="zimeiti" href="#"></a>
                    </li>
                    <li>
                        <a class="zanshang" href="#"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

     <!-- 悬浮块 -->
     <div class="totop">
        <a href="#top"><img src="img/上.png" alt=""></a>
    </div>
</div>  
</body>

<script type="text/javascript">
//登陆注册界面
$("#mashop").click(function () {
        $("#demo").css("display", "inline");
    });
    $(".dompan").click(function () {
        $("#demo").css("display", "none");
    });
    //首行头标跳转商城
    $(".pic1").click(function () {
        window.location.href="../网易云商城界面/网易云商城.html";
        });

  //跳转购物界面
  $(".gouwu>img").click(function () {
        window.location.href="../网易云商城购物车/shopcar.html";
        });



    //获取所有的a标签 
  var alA=document.getElementById("gallery").getElementsByTagName("a");
     //循环遍历所有a标签
  for(var i=0;i<alA.length;i++){
    //为a设置点击事件
    alA[i].onclick=function(){
        //把a标签中的href 中存储的图片路径给需要展示图片的标签。
        document.getElementById("img").src=this.href;
        //把a标签中存储的title中存储的内容给需要展示的标签。
        document.getElementById("des").innerText=this.title;
        //阻止a链接的默认跳转。
        return false;
    };
  };



    
    $(document).ready(function(){  
    var options = {  
             zoomType: 'standard',  
             lens:true,  
             preloadImages: true,  
             alwaysOn:false,  
             zoomWidth: 700,  
             zoomHeight:737,  
             xOffset:0,  
             yOffset:1000,  
            
             //...MORE OPTIONS  
    };  
    $('.show').jqzoom();  
});  
</script>
<script>
        var btn1= document.getElementById("btn");
        btn1.onclick=function(){
            alert("请您先登录")
        }
</script>
<script>
    var btn1= document.getElementById("btn1");
    btn1.onclick=function(){
            alert("请您先登录")
        }
</script>
<script>
    var btn1= document.getElementById("btn2");
    btn1.onclick=function(){
            alert("请您先登录")
        }
</script>
<script>
    var btn1= document.getElementById("btn3");
    btn1.onclick=function(){
            alert("请您先登录")
        }
</script>
<script>
    var btn1= document.getElementById("btn4");
    btn1.onclick=function(){
            alert("请您先登录")
        }
</script>


</html>